<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>地图demo</title>
    <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"></script>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=F4VxOyGMo84zqM64v4hdXy1t"></script>
	<script type="text/javascript" src="http://api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.js"></script>
	<link rel="stylesheet" href="http://api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.css" />
	<style>
#map22 input[type="button"]{
			background-color: #0D9BF2;
			height:25px;
			text-align:center;
			line-height:25px;
			color:#fff;
			font-size:12px;
			border-radius:3px;
			outline: none;
			border:0;
			cursor:pointer;
}

#map22 input[type="button"].red{background-color:#f00;color:#fff;}
#map22 input[type="button"].green{background-color:#0f0;color:#fff;}
	</style>
  </head>

  <body>
    <div style="width:350px;height:900px;border:#ccc solid 1px;float:left;margin-right:10px;padding:8px;" id="map22">
		<input type="button" value="保存路径" onclick="setlinecolor(0)" />
		<input type="button" class="red" value="清空所有" onclick="clearAll()" />
		<br/><br/>
		临时坐标点:
		<textarea style="width:340px;height:300px;" id="pointlist_temp"></textarea>
		<br/><br/>
        线路列表:
		<ul id="linelist">
		</li>
	</div>
    <!--百度地图容器-->
    <div style="width:1500px;height:900px;border:#ccc solid 1px;font-size:12px;float:left;" id="map"></div>
  </body>
  <script type="text/javascript">
	var isDianDian = false;
	var pointlist_temp = $('#pointlist_temp');
	var linelist = $('#linelist');
	var overlays = [];

    function addMapOverlay(){
                return;
		//加labels
      var labels = [
        {position:{lng:117.17745,lat:39.080759},content:"我的标记"}
      ];
      for(var index = 0; index < labels.length; index++){
        var opt = { position: new BMap.Point(labels[index].position.lng,labels[index].position.lat )};
        var label = new BMap.Label(labels[index].content,opt);
        map.addOverlay(label);
      };

		//加路径
      var plOpts = [
        {strokeColor:"#00f",strokeWeight:"4",strokeOpacity:"0.4"}
      ];
      var plPath = [
        [
          new BMap.Point(117.174288,39.081585),
          new BMap.Point(117.177576,39.078014),
          new BMap.Point(117.18169,39.081249),
          new BMap.Point(117.18169,39.081249),
          new BMap.Point(117.18169,39.081249)
        ],
      ];
      for(var index = 0; index < plOpts.length; index++){
        var polyline = new BMap.Polyline(plPath[index],plOpts[index]);
        map.addOverlay(polyline);
      }
    }

	function genLineList(){
		linelist.empty();
		for(var i=0;i<overlays.length;i++){
			genLineList_li(i,overlays[i]);
		}
	}
	function genLineList_li(idx,polyline){
		var _1 = "<li style='padding:4px 10px;'>线路"+idx+"&nbsp;<select onchange='setlinecolor("+idx+",this.value)'><option value='red'>红色</option><option value='blue'>蓝色</option><option value='green'>绿色</option></select>&nbsp;<input type='button' value='编辑' onclick='editline("+idx+",this)' />&nbsp;<input type='button' class='red' value='删除' onclick='delline("+idx+")' /></li>";
		linelist.append(_1);
	}

    function setlinecolor(i,color){
        overlays[i].setStrokeColor(color);
    }
	function editline(i,obj){
        overlays[i].enableEditing();
        $(obj).val('保存').addClass('green').one("click", function(){
            overlays[i].disableEditing();
            $(this).val('编辑').removeClass('green');
        });
	}
	function delline(i){
		overlays.remove(i);
        map.removeOverlay(overlays[i]);
        genLineList();
	}


	function addMapDrawingManager(){
		var styleOptions = {
			strokeColor:"red",    //边线颜色。
			fillColor:"red",      //填充颜色。当参数为空时，圆形将没有填充效果。
			strokeWeight: 3,       //边线的宽度，以像素为单位。
			strokeOpacity: 0.8,	   //边线透明度，取值范围0 - 1。
			fillOpacity: 0.6,      //填充的透明度，取值范围0 - 1。
			strokeStyle: 'solid' //边线的样式，solid或dashed。
		}
		var overlaycomplete = function(e){
			overlays.push(e.overlay);
			//alert(e.overlay);
			//overlays[0].hide();
			console.log(e.overlay.getPath());
			var _1 = e.overlay.getPath();
			var _2 = [];
			for(var i=0;i<_1.length;i++){
				_2.push(_1[i].lng+','+_1[i].lat);
			}
			pointlist_temp.val(_2.join('\n'));
            //e.overlay.setStrokeColor('blue');
            genLineList();
		};
		//实例化鼠标绘制工具
		var drawingManager = new BMapLib.DrawingManager(map, {
			isOpen: false, //是否开启绘制模式
			enableDrawingTool: true, //是否显示工具栏
			drawingToolOptions: {
				anchor: BMAP_ANCHOR_TOP_RIGHT, //位置
				offset: new BMap.Size(5, 5), //偏离值
				scale: 1,
				drawingModes: [BMAP_DRAWING_POLYLINE],
			},
			polylineOptions: styleOptions, //线的样式
		});
		 //添加鼠标绘制工具监听事件，用于获取绘制结果
		drawingManager.addEventListener('overlaycomplete', overlaycomplete);
	}
    function clearAll() {
		for(var i = 0; i < overlays.length; i++){
            map.removeOverlay(overlays[i]);
        }
        overlays.length = 0
    }




	//初始化
    function initMap(){
      createMap();//创建地图
      setMapEvent();//设置地图事件
      addMapControl();//向地图添加控件
      addMapOverlay();//向地图添加覆盖物
	  addMapDrawingManager();
    }
    function createMap(){
      map = new BMap.Map("map");
      map.centerAndZoom(new BMap.Point(117.178852,39.079737),18);
    }
    function setMapEvent(){
      map.enableScrollWheelZoom();
      map.enableKeyboard();
      map.enableDragging();
      map.enableDoubleClickZoom()
    }
    function addClickHandler(target,window){
      target.addEventListener("click",function(){
        target.openInfoWindow(window);
      });
    }
    function addMapControl(){
      var scaleControl = new BMap.ScaleControl({anchor:BMAP_ANCHOR_BOTTOM_LEFT});
      scaleControl.setUnit(BMAP_UNIT_METRIC);
      map.addControl(scaleControl);
      var navControl = new BMap.NavigationControl({anchor:BMAP_ANCHOR_TOP_LEFT,type:3});
      map.addControl(navControl);
      var overviewControl = new BMap.OverviewMapControl({anchor:BMAP_ANCHOR_BOTTOM_RIGHT,isOpen:false});
      map.addControl(overviewControl);
    }
    var map;
      initMap();


	Array.prototype.remove=function(obj){
		for(var i =0;i <this.length;i++){
			var temp = this[i];
		    if(!isNaN(obj)){ temp=i; }
            if(temp == obj){
                for(var j = i;j <this.length;j++){
                    this[j]=this[j+1];
                }
                this.length = this.length-1;
            }
        }
    }
  </script>
</html>